<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index属性失效产生的原因及解决方法</title>
</head>
<body>
    <h2>分析z-index属性使用及失效问题的前提————红色文本在绿色方块盒子之上视为正常</h2>
    <p>Case01:正常的使用情况</p>
    <hr>
    <div style="height: 150px;">
        <div style="z-index:1;position:absolute;background-color:#16a085;height:150px;width:150px;"></div>
        <div style="z-index:999;position: relative;color:#ff0000;">
            该文本包含在div元素中。。。。。。。。。。。。。。。
        </div>
    </div>

    <p>Case02:未对定义z-index属性的元素加以定位属性——{position:relative\absolute\fixed}</p>
    <hr>
    <div style="height: 150px;">
        <div style="z-index:1;position:absolute;background-color:#16a085;height:150px;width:150px;"></div>
        <div style="z-index:999;color:#ff0000;">
            该文本包含在div元素中。。。。。。。。。。。。。。。
        </div>
    </div>

    <p>Case03:父元素的层叠优先级比其他元素低</p>
    <hr>
    <div style="height: 150px;">
        <div style="z-index:1;position:absolute;background-color:#16a085;height:150px;width:150px;"></div>
        <div style="z-index:-1;position:relative;color:#ff0000;">
            <div style="z-index:999;position:relative;">该文本包含在div元素中。。。。。。。。。。。。。。。</div>
    </div>

    <p>Case04:IE6-7中父元素没有设置z-index即被视为非层叠元素</p>
    <hr>
    <div style="height: 150px;">
    <div style="z-index:1;position:absolute;background-color:#16a085;height:150px;width:150px;"></div>
    <div style="position:relative;color:#ff0000;">
        <div style="z-index:999;position:relative;">该文本包含在div元素中。。。。。。。。。。。。。。。</div>
    </div>
</div>
</div>
</div>
</body>
</html>
